<template>
  <div class="color-spec-container">
    <div class="header">
      <h2>{{ data.title }}</h2>
      <p class="subtitle">{{ data.subtitle }}</p>
    </div>
    <div class="colorCenter">
      <div class="color-extraction">
        <h3>颜色提取</h3>
        <div class="colors">
          <div v-for="(color, index) in data.colors" :key="index" class="colorItem">
            <span class="color-label">颜色{{ index + 1 }}</span>
            <div class="colorCardBox" :style="{ backgroundColor: color.hex }"></div>
            <span class="colorRGBvalue">rgb({{ color.rgb }})</span>
            <span class="color-value">{{ color.hex }}</span>
            <el-button
              class="copy-btn"
              size="small"
              link
              @click="copyToClipboard(color.hex)"
            >
              <el-icon><DocumentCopy /></el-icon>
            </el-button>
          </div>
          <div class="colorItem backgroundBox">
            <span class="color-label">背景</span>
            <div class="colorCardBox" :style="{ backgroundColor: data.background.hex }"></div>
            <span class="colorRGBvalue">rgb({{ data.background.rgb }})</span>
            <span class="color-value">{{ data.background.hex }}</span>
            <el-button
              class="copy-btn"
              size="small"
              link
              @click="copyToClipboard(data.background.hex)"
            >
              <el-icon><DocumentCopy /></el-icon>
            </el-button>
          </div>
        </div>
      </div>
      <div class="common-combinations">
        <h3>常用组合</h3>
        <div class="combinations">
          <div v-for="(combination, index) in data.fillCombinations" :key="index" class="combination-item">
            <p class="combination-label">{{ getCombinationLabel(index) }}</p>
            <el-button
              class="copy-btn"
              size="small"
              link
              @click="copyCombination(combination)"
            >
              <el-icon><DocumentCopy /></el-icon>
            </el-button>
            <div class="combination-colors">
              <div v-for="(colorIndex, i) in combination" :key="i" class="combination-color"
                :style="{ backgroundColor: getColorHex(colorIndex) }"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      {{ data.footer }}
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import { ElMessage } from 'element-plus';
import { DocumentCopy } from '@element-plus/icons-vue';

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
});

// 获取颜色对应的hex值
const getColorHex = (index) => {
  const colorIndex = index - 1;
  if (colorIndex >= 0 && colorIndex < props.data.colors.length) {
    return props.data.colors[colorIndex].hex;
  }
  return '#FFFFFF';
};

// 生成组合标签
// 生成组合标签
const getCombinationLabel = (index) => {
  const currentLength = props.data.fillCombinations[index].length;
  const isLastItem = index === props.data.fillCombinations.length - 1;

  if (index === 0) {
    return `${currentLength}个序列`;
  }

  const prevLength = props.data.fillCombinations[index - 1].length;
  
  if (isLastItem) {
    return `>${prevLength}个`;
  } else {
    const diff = currentLength - prevLength;
    if (diff === 1) {
      return `${currentLength}个序列`;
    } else {
      return `${prevLength + 1}~${currentLength}个序列`;
    }
  }
};

// 复制单个颜色到剪贴板
const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text)
    .then(() => {
      ElMessage.success({
        message: '复制成功',
        // 当前父元素
        appendTo: document.querySelector('.color-spec-container'),
      });
    })
    .catch(err => {
      console.error('复制失败:', err);
      ElMessage.error({
        message: '复制失败，请手动复制',
        // 当前父元素
        appendTo: document.querySelector('.color-spec-container'),
      });
    });
};

// 复制组合颜色到剪贴板
const copyCombination = (combination) => {
  const colors = combination.map(index => getColorHex(index)).join(', ');
  copyToClipboard(colors);
};
</script>

<style scoped lang="scss">
.color-spec-container {
  padding: 20px;
  font-family: Arial, sans-serif;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  .header h2 {
    margin: 0;
    color: #333;
    font-size: 24px;
  }

  .subtitle {
    margin: 5px 0 0px;
    color: #666;
    font-size: 14px;
  }
}

.colorCenter {
  display: flex;
}

.color-extraction {
  width: 340px;
  margin-right: 20px;

  h3 {
    margin: 20px 0 10px;
    color: #333;
    font-size: 18px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
  }

  .colors {
    display: flex;
    flex-direction: column;

    .colorItem {
      padding: 3px 5px;
      border-radius: 4px;
      display: flex;
      align-items: center;

      .color-label {
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
        width: 55px;
        text-align: right;
        margin-right: 5px;
      }

      .colorCardBox {
        width: 35px;
          height: 30px;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      }

      .colorRGBvalue {
        flex: 1;
        display: block;
        font-size: 12px;
        margin: 0 6px;
        line-height: 1.4;
      }

      .color-value {
        display: block;
        font-size: 12px;
        margin: 0 10px;
        line-height: 1.4;
      }

      .copy-btn {
        // margin-right: 10px;
        color: #666;
        &:hover {
          color: #409eff;
        }
      }
    }

    .backgroundBox {
      border-top: 1px solid #ddd;
    }
  }
}

.common-combinations {
  display: flex;
  flex-direction: column;

  h3 {
    margin: 20px 0 10px;
    color: #333;
    font-size: 18px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
  }

  .combinations {
    display: flex;
    flex: 1;
    flex-direction: column;
    // justify-content: center;

    .combination-item {
      padding: 10px;
      display: flex;
      align-items: center;
      border-bottom: 1px dashed #ddd;

      .combination-label {
        margin: 10px 0 5px;
        font-size: 14px;
        color: #555;
        width: 90px;
        font-weight: 700;
        text-align: right;
        margin-right: 10px;
      }

      .combination-colors {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        width: calc(100% - 100px);
        .combination-color {
          width: 35px;
          height: 30px;
          border-radius: 4px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }
      }

      .copy-btn {
        color: #666;
        margin-right: 10px;
        &:hover {
          color: #409eff;
        }
      }
    }
  }
}

.footer {
  margin-top: 20px;
  text-align: right;
  font-size: 12px;
  color: #666;
  font-style: italic;
}
</style>